<template>
  <p v-if="index != 0">且</p>
  <div class="condition-item-form">
    <div class="condition-item-form__label">{{ obj.label }}</div>
    <!-- 数值   type === 1 -->
    <div class="condition-item-form__input" v-if="obj.type === 1">
      <el-select
        :model-value="obj.numberType"
        placeholder="请选择"
        @change="handleChange($event, 'numberType')"
        :style="{ width: '130px' }"
      >
        <el-option
          v-for="item in numberTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <template v-if="obj.numberType === 6">
        <el-input-number
          :model-value="obj.minValue"
          placeholder="请输入最小数值"
          controls-position="right"
          @input="handleChange($event, 'minValue')"
        />
        <el-input-number
          :model-value="obj.maxValue"
          placeholder="请输入最大数值"
          controls-position="right"
          @input="handleChange($event, 'maxValue')"
        />
      </template>
      <el-input-number
        v-else
        :model-value="obj.value"
        placeholder="请输入数值"
        controls-position="right"
        @input="handleChange($event, 'value')"
      />
      <span v-if="obj.unit">{{ obj.unit }}</span>
    </div>
    <!-- 选项   type === 2 -->
    <div class="condition-item-form__input" v-if="obj.type === 2">
      <el-checkbox-group :model-value="obj.values" @change="handleChange($event, 'values')">
        <el-checkbox
          v-for="(item, index) in obj.options"
          :key="index"
          :label="item"
          :value="item"
        ></el-checkbox>
      </el-checkbox-group>
    </div>
    <!-- 发起人 type === 3 -->
    <div class="condition-item-form__input" v-if="obj.type === 3">
      <!-- 选择成员/角色 -->
    </div>
    <el-button type="danger" @click="remove" text circle>
      <i class="icon iconfont">&#xe718;</i>
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { numberTypeArr } from '../../dicts'
const emits = defineEmits(['remove', 'edit'])
const props = defineProps({
  index: {
    type: Number,
    default: () => {
      return 0
    }
  },
  obj: {
    type: Object as () => any,
    default: () => {
      return {}
    }
  }
})
const numberTypes = ref(numberTypeArr)
const handleChange = (val: any, type: any) => {
  const valueObj = {
    [type]: val
  }
  emits(
    'edit',
    {
      ...props.obj,
      ...valueObj
    },
    props.index
  )
}
const remove = () => {
  emits('remove', props.index)
}
</script>
